<template>
	<div class="all">
		<el-card class="box-card-first">
			<div slot="header">
				<span>基本信息</span>
			</div>
			<div class="formMessage">
				<el-form ref="form" :model="formData" label-width="100px">
					<el-form-item label="资讯分类：">
						<el-select v-model.trim="formData.region" placeholder="请选择资讯分类"> </el-select>
					</el-form-item>
					<el-form-item label="推荐：">
						<el-switch v-model.trim="formData.recommend"></el-switch>
					</el-form-item>
					<el-form-item label="阅读量：">
						<el-input-number v-model.trim="formData.numVisit" placeholder="请输入阅读量" controls-position="right" :min="0"></el-input-number>
					</el-form-item>
					<el-form-item label="显示顺序：">
						<el-input v-model.trim="formData.sortNum" placeholder="请输入显示顺序"></el-input>
					</el-form-item>
					<el-form-item label="作者名称：">
						<el-input v-model.trim="formData.author" placeholder="请输入作者名称"></el-input>
					</el-form-item>
					<el-form-item label="发布源：">
						<el-input v-model.trim="formData.sourceName" placeholder="请输入发布源"></el-input>
					</el-form-item>
					<el-form-item label="源链接：">
						<el-input v-model.trim="formData.sourceUrl" placeholder="请输入源链接"></el-input>
					</el-form-item>
				</el-form>
			</div>
		</el-card>
		<el-card class="box-card-second">
			<WangEditor v-model.trim="Content"></WangEditor>
			<div class="cover">
				<span>封面和摘要</span>
				<div class="cardSpan">
					<i class="el-icon-warning" style="color: #409eff"></i>
					<span>注意：为提升用户访问体验，系统限制图片最大上传为2M,如图片超过2M,请打开 www.tinypng.com进行处理再上传</span>
				</div>
			</div>
			<div class="img-text">
				<el-card :body-style="{ padding: '0px' }" shadow="never" class="banner_upload" @click.native="addAndUpdate(null)">
					<div>
						<span class="spanAdd"><i class="el-icon-plus"></i></span>
					</div>
				</el-card>
				<el-input
					v-model.trim="textarea"
					class="text"
					type="textarea"
					:rows="6"
					placeholder="选填，摘要会在今日咨询、转发链接等文章外的场景显露，帮助读者快速了解内容，如不填写则默认抓取正文前54个字。"
				></el-input>
			</div>
			<div class="img-list"></div>
			<div class="button-word-number-div">
				<span class="word-number">{{ '正文字数\xa0\xa0' + len }}</span>
				<div>
					<el-button type="primary">确认</el-button>
					<el-button @click="cancel">取消</el-button>
				</div>
			</div>
		</el-card>
	</div>
</template>

<script>
export default {
	name: 'ReleaseArtcle',

	data() {
		return {
			//表单数据
			formData: { imgUrl: [] },
			Content: '',
			//正文长度
			len: 0,
		};
	},
	watch: {
		Content(val) {
			let reg = /<\/?.+?\/?>/g;
			this.len = val.replace(reg, '').length;
		},
	},
	mounted() {},

	methods: {
		cancel() {
			this.$router.push({
				path: '/mall/article',
				query: {},
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.all {
	display: flex;
	justify-content: space-between;
	height: 800px;
	margin-top: 10px;
	.box-card-first {
		width: 20%;
		height: 100%;
		margin-left: 10px;
	}
	.box-card-second {
		width: 80%;
		height: 100%;
		margin-left: 20px;
		margin-right: 10px;
		overflow-y: auto;

		.cover {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 20px;
			margin-bottom: 20px;
			.cardSpan {
				display: flex;
				flex: 1;
				border: 1px #409eff solid;
				background-color: rgb(217, 236, 255);
				height: 40px;
				border-radius: 5px;
				margin-left: 20px;
				align-items: center;
				padding-left: 20px;
				span {
					margin-left: 20px;
					color: red;
				}
			}
		}
		.img-text {
			display: flex;
			.banner_upload {
				border: 1px dashed #d9d9d9;
				height: 140px;
				width: 300px;
				text-align: center;
				.spanAdd {
					color: #909399;
					font-size: 30px;
					line-height: 140px;
				}
			}
			.text {
				margin-left: 20px;
			}
		}
		.button-word-number-div {
			display: flex;
			align-items: center;
			margin-top: 20px;
			justify-content: space-between;
			.word-number {
				color: #909399;
			}
		}
		.img-list {
			margin-top: 20px;
			border: 1px red solid;
			width: 100%;
			height: 150px;
		}
	}
}
</style>
